<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <h1></h1>
    <button id="btn">点击获取人名</button>


    <script src="https://cdn.bootcdn.net/ajax/libs/Mock.js/1.0.0/mock-min.js"></script>
    <script>

        // ajax  async  javascript and xml
        // 异步 请求  json

        //同步就是需要等
        //异步不需要等，正常执行后面的代码
        //前端 ====》 后端

        // 接口文档  url  字段

        // json 其实就是一个对象，只是有更加严格的限定
        // let obj = {
        //     name: 'zhangsan',
        //     age: 18,
        //     show: function () {
        //         console.log(this);
        //     }
        // }
        // console.log(JSON.stringify(obj));
        // let json = `{
        //     "name":"zhangsan",
        //     "age":18
        // }
        // `

        // jhgcgjhdschj
        // 请求
        // console.log(1111);


        //===== ajax实现步骤   按需取数据
        // 1.创建XMLHttpRequest对象
        // 2.发出http请求
        // 3.接收服务器返回的数据
        // 4.更新网页
        // let xhr = new XMLHttpRequest()
        //打开链接    
        // xhr.open('GET',url,true) 
        // method：请求方式 get post
        //  url：请求的路径
        //  第三个参数默认true，异步请求
        // xhr.open('GET', '/user', true)
        // xhr.send()
        //通过事件监听处理服务器返回的消息
        //服务器返回的消息当中有四个常用属性
        // responseText：作为响应主体返回的文本
        // responseXML： 
        // status：http状态码  200表示请求成功
        // readyState：http状态说明 0 1 2 3 4
        //请求未初始化(0):即还没有调用send方法
        //服务器连接已经建立(1):调用send方法，正在发送请求
        //请求已接受(2):send方法执行完成
        //请求正在处理(3):正在解析响应内容
        //请求已完成(4):响应就绪，可以进行客户端调用
        // xhr.onreadystatechange = function () {
        //     if (xhr.readyState === 4 && xhr.status === 200) {
        //         console.log(xhr.responseText);

        //     }

        // }


        let btn = document.getElementById('btn');
        btn.onclick = function () {
            //发送请求
            //创建小黄人
            let xhr = new XMLHttpRequest();
            //打开链接
            xhr.open('get', '/user', true)
            //发送
            xhr.send()
            //事件监听状态
            xhr.onreadystatechange = function () {
                if (xhr.status === 200 && xhr.readyState === 4) {
                    console.log(JSON.parse(xhr.responseText));
                    let h1 = document.getElementsByTagName('h1')[0];
                    console.log(h1);
                    h1.innerHTML = JSON.parse(xhr.responseText).name
                }

            }
        }

        Mock.mock('/user', function () {
            return Mock.mock({
                "name": '@cname()',
            })
        })



    </script>

</body>

</html>